<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期(旧)</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>
<!--引入prop-types库,用于将对props进行类型限制-->
<script type="text/javascript" src="../Js/prop-types.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js

class Count extends React.Component{


    constructor(props) {
        super(props);
        console.log("Count---constructor")
        this.state={
            sum:0
        }
    }

    add=()=>{
        let {sum}=this.state
        sum+=1
        this.setState({
            sum
        })

    }

    // 组件将要挂载
    componentWillMount(){
        console.log("Count---componentWillMount")
    }

    // 组件挂载完毕
    componentDidMount(){
        console.log("Count---componentDidMount")
    }


    // setState执行后的一道阀门，返回值为true时才方向，返回值为false时后面的生命周期都不生效
    shouldComponentUpdate(){
        console.log("Count---shouldComponentUpdate")
        return false
    }

    // 组件更新之前
    componentWillUpdate(){
        console.log("Count---componentWillUpdate")
    }

    // 组件更新之后
    componentDidUpdate(){
        console.log("Count---componentDidUpdate")
    }

    // 组件卸载之前
    componentWillUnmount(){
        console.log("Count---componentWillUnmount")
    }


    death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById("container"))
    }

    force=()=>{
        // 强制更新的生命周期,跳过shouldComponentUpdate阀门
        this.forceUpdate()
    }

    // 渲染
    render(){
        console.log("Count---render")
        return (
            <div>
                <h1>{this.state.sum}</h1>
                <button onClick={this.add}>点我+1</button>
                <button onClick={this.death}>卸载组件</button>
                <button onClick={this.force}>不修改数据，强制更新组件</button>
            </div>
        )
    }
}

ReactDOM.render(<Count/>,document.getElementById("container"))

</script>